<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link href="css/webgl-tutorials.css" type="text/css" rel="stylesheet">-->
    <style>
        @import url("./css/webgl-tutorials.css");
        body{
            margin: 0;
        }
        canvas{
            width: 100vw;
            height: 100vh;
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas！</canvas>
<div id="uiContainer">
    <div id="ui">
        <div id="x"></div>
        <div id="y"></div>
        <div id="angle"></div>
        <div id="scaleX"></div>
        <div id="scaleY"></div>
    </div>
</div>

<!-- vertex shader -->
<script id="vertex-shader-2d" type="x-shader/x-vertex">
    attribute vec2 a_position;
    uniform mat3 u_matrix;
    varying vec4 v_color;
    void main(){
        gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
        v_color = gl_Position * 0.5 + 0.5;
    }
</script>

<script id="fragment-shader-2d" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 v_color;
    void main(){
        gl_FragColor = v_color;
    }
</script>
<script src="./utils/webgl-utils.js" type="text/javascript"></script>
<script src="./utils/webgl-lessons-ui.js" type="text/javascript"></script>
<script src="./utils/m3.js" type="text/javascript"></script>

<script type="text/javascript">
    function setGeometry(gl) {
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
            0, -100,
            150, 125,
            -175, 100
        ]), gl.STATIC_DRAW);
    }

    function main() {
        let canvas = document.querySelector("#canvas");
        let gl = canvas.getContext("webgl");
        if (!gl) {
            alert("您的浏览器不支持WebGL！");
        }

        let program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

        let positionAttributeLocation = gl.getAttribLocation(program, "a_position");
        let matrixLocation = gl.getUniformLocation(program, "u_matrix");

        let positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

        setGeometry(gl);

        let translation = [200, 150];
        let angleInRadians = 0;
        let scale = [1, 1];

        drawScene();

        // Setup a ui.
        webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: gl.canvas.width });
        webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: gl.canvas.height});
        webglLessonsUI.setupSlider("#angle", {slide: updateAngle, max: 360});
        webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
        webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});

        function updatePosition(index) {
            return function(event, ui) {
                translation[index] = ui.value;
                drawScene();
            };
        }

        function updateAngle(event, ui) {
            let angleInDegrees = 360 - ui.value;
            angleInRadians = angleInDegrees * Math.PI / 180;
            drawScene();
        }

        function updateScale(index) {
            return function(event, ui) {
                scale[index] = ui.value;
                drawScene();
            };
        }

        // Draw the scene.
        function drawScene() {
            webglUtils.resizeCanvasToDisplaySize(gl.canvas);
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

            // Clear the canvas.
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Tell it to use our program (pair of shaders)
            gl.useProgram(program);

            // Turn on the attribute
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(
                positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

            // Compute the matrix
            let matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
            matrix = m3.translate(matrix, translation[0], translation[1]);
            matrix = m3.rotate(matrix, angleInRadians);
            matrix = m3.scale(matrix, scale[0], scale[1]);

            // Set the matrix.
            gl.uniformMatrix3fv(matrixLocation, false, matrix);

            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }
    }

    main();
</script>
</body>
</html>
